<template>
  <nav class="navbar" :class="{'scrolled': isScrolled}">
    <ul class="nav-list">
      <!-- 导航菜单项 -->
      <li v-for="item in navItems" :key="item.id" class="nav-item">
        <a :href="item.link" @click.prevent="navigateTo(item.link)" class="nav-link">
          <el-icon class="nav-icon" ref="navIcon">
            <component :is="item.icon" />
          </el-icon>
          <span>{{ item.name }}</span>
        </a>
      </li>

      <!-- 头像组件 -->
      <li class="avatar-item">
        <el-dropdown trigger="hover" @command="handleCommand">
          <el-avatar :size="40" :src="avatarUrl" />
          <template #dropdown>
            <el-dropdown-menu class="drop-menu">
              <el-dropdown-item
                v-for="dropdownItem in dropdownItems"
                :key="dropdownItem.command"
                class="custom-dropdown-item"
                :command="dropdownItem.command"
              >
                <el-icon class="icon">
                  <component :is="dropdownItem.icon" />
                </el-icon>
                <span class="text">{{ dropdownItem.name }}</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
    </ul>
  </nav>
</template>

<script>
import { House, Reading, Refresh, InfoFilled, User, UserFilled, SwitchButton } from '@element-plus/icons-vue' // 引入需要的图标
import { layout } from '@/utils/layout'

export default {
  components: {
    House,
    Reading,
    Refresh,
    User,
    UserFilled,
    InfoFilled,
    SwitchButton
  },
  name: 'AnimatedNavbar',
  data()
  {
    return {
      avatarUrl: '',
      isScrolled: false,
      navItems: [
        { id: 1, name: '首页', link: '/', icon: House }, // 首页路由
        { id: 2, name: '公告', link: '/gonggao', icon: Reading }, // 公告路由
        { id: 3, name: '业务', link: '/services', icon: Refresh }, // 存取路由
        { id: 4, name: '关于', link: '/about', icon: InfoFilled }, // 关于路由
        { id: 5, name: '个人', link: '/info/userinfo', icon: User }, // 关于路由
        { id: 6, name: '后台', link: '/admin/index', icon: UserFilled } // 后台路由
      ],
      dropdownItems: [
        { command: 'home', name: '回到首页', icon: House },
        { command: 'services', name: '业务办理', icon: Refresh },
        { command: 'gongao', name: '公告页面', icon: Reading },
        { command: 'about', name: '关于页面', icon: InfoFilled },
        { command: 'logout', name: '退出登录', icon: SwitchButton, action: 'onLayout' },
        { command: 'info', name: '个人信息', icon: User }
      ]
    }
  },

  created()
  {
  },

  mounted()
  {
    // 防止 vuex 的 bug 导致崩溃
    this.avatarUrl = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    // 监听 user 模块的变化
    this.$store.watch(
      (state) => state.user,
      (user) =>
      {
        if (user) this.avatarUrl = user.avatar
      },
      { immediate: true } // 立即触发一次
    )
    window.addEventListener('scroll', this.handleScroll)
  },

  beforeUnmount()
  {
    window.removeEventListener('scroll', this.handleScroll)
  },

  methods: {
    handleScroll()
    {
      this.isScrolled = window.scrollY > 100
    },
    // 处理菜单项点击事件
    handleCommand(command)
    {
      switch (command)
      {
      case 'home':
        this.$router.push('/') // 跳转到首页
        break
      case 'services':
        this.$router.push('/services') // 跳转到业务
        break
      case 'gongao':
        this.$router.push('/gonggao') // 跳转到公告
        break
      case 'about':
        this.$router.push('/about') // 跳转到关于
        break
      case 'login':
        this.$router.push('/login') // 跳转到登录注册
        break
      case 'info':
        this.$router.push('/info/userinfo') // 跳转到用户信息
        break
      case 'logout':
        this.onLayout()
        break
      default:
        break
      }
    },
    // 处理导航菜单项点击事件
    navigateTo(link)
    {
      this.$router.push(link) // 使用 Vue Router 跳转
    },

    onLayout()
    {
      layout(this)
    }
  }
}
</script>

<style scoped>
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

a {
  -webkit-user-drag: none;
}

.navbar {
  background-color: rgba(9, 39, 86, 0);
  transition: background-color 0.5s ease; /* 添加背景色过渡动画 */
  overflow: hidden;
  transition: top 0.5s;
  position: fixed;
  width: 100%;
  height: 10vh;
  top: 0;
  z-index: 1000;
}

.nav-list {
  height: 10vh;
  list-style-type: none;
  margin: 0;
  padding: 0;
  transition: background-color 0.3s;
  user-select: none;
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  gap: 10px; /* 添加间隔 */
  margin-left: 20px;
}

.nav-list li {
  float: left;
}

.nav-list li a {
  border-radius: 10px;
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  color: rgb(255, 255, 255);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.3s; /* 添加 transform 过渡 */
  position: relative; /* 确保子元素定位正确 */
}

.nav-list li a:hover {
  border-radius: 10px;
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影 */
  background-color: #57575758;
  transform: scale(1.05); /* 轻微放大效果 */
}

.nav-list li a:hover .nav-icon {
  transform: rotate(360deg) !important; /* 强制确保旋转，增加优先级 */
  transition: transform 0.5s ease !important; /* 平滑旋转动画，增加优先级 */
}

/* 调整图标和文字的间距 */
.el-icon {
  margin-right: 8px; /* 图标和文字之间的间距 */
}

.nav-icon {
  transition: transform 0.5s ease !important; /* 确保图标有平滑过渡，增加优先级 */
  display: inline-block; /* 确保 transform 生效 */
}

/* 头像组件样式 */
.avatar-item {
  margin-left: auto; /* 将头像推到最右边 */
  padding-right: 40px; /* 右侧留出一些间距 */
}

/* 移动端适配 */
@media (max-width: 768px) {
  .nav-list {
    font-size: 12px;
  }
}

.navbar.scrolled {
  background-color: #425aef; /* 背景色变为透明 */
}

.drop-menu {
  font-size: 68px;
  font-weight: 600;
  text-align: center;
  width: 112px;
  border: 0;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  padding: 0;
  box-sizing: border-box;
  background-color: transparent;
}

.drop-menu > * {
  height: 50px;
  width: 80px;
  border-radius: 8px;
  user-select: none;
}

.icon {
  transition: transform 0.3s ease;
  /* 平滑过渡效果 */
}

.text {
  transition: opacity 0.3s ease;
  /* 平滑过渡效果 */
}

:deep(.custom-dropdown-item:hover) {
  height: 50px;
  width: 80px;
  border-radius: 8px;
  color: #FFF;
  background-color: #425aef;
}

.custom-dropdown-item:hover .icon {
  transform: scale(2.5);
  /* 放大图标 */
  margin: auto;
  /* 水平居中 */
}

.custom-dropdown-item:hover .text {
  display: none;
  /* 隐藏文字 */
}

:deep(.custom-dropdown-item:focus) {
  height: 50px;
  width: 80px;
  border-radius: 8px;
  color: #FFF;
  background-color: #425aef;
}
</style>
